<template>
	<view class="wrapper" v-show="isShowMask">
		<transition name="content">
			<view class="content_view" v-show="isShow">
				<view class="title_view">
					<view class="title">请选择所在地区</view>
					<view class="close_view" @click="hidden">
						<icon class="close_icon" :type="'clear'" size="26"/>
					</view>
				</view>
				<view class="select_top">
					<view class="select_top_item" ref="select_top_item" v-for="(item,index) in menulist" :key="index" @click="select_top_item_click(item,index)">
						<text class="address_value">{{item.local_name}}</text>
					</view>
					<!-- <view class="indicator" :style="{ left: indicatorStyleLeft + 'px' }" ref="indicator"></view> -->
				</view>
				<view class="swiper">
					<view class="swiper-item">
						<scroll-view class="scroll-view-item" scroll-y="true">
							<view class="address_item" v-for="(item,index) in cityAreaArray" :key="index" @click="address_item_click(item,index)">
								<image v-if="selectIndexArr[swiper_index] === index" class="address_item_icon" src="../../static/yixuan-selectAddress/gou.png" mode=""></image>
								{{item.local_name}}
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</transition>
		<view class="mask" @click="hidden" v-show="isShowMask"></view>
	</view>
</template>

<script>
	import * as Base_API from '@/api/base.js'
	import { api, api_model } from '@/ui-domain'
	export default {
		data() {
			return {
				isShow: false,
				isShowMask: false,
				dataList: ['请选择'],
				currentIndex: 0,
				// cityData: {},
				cityAreaArray: [],
				selectIndexArr: [],
				indicatorStyleLeft: 16,
				menulist:[{local_name:'请选择'}
				],
				regions_id:0,
				addr:[]
			};
		},
		methods:{
			show(){
				this.isShow = true
				this.isShowMask = true
				this.addr = []
				this.getCity(0)
				this.menulist = [{local_name:'请选择'}]
			},
			hidden() {
				this.isShow = false
				setTimeout(() => { 
					this.isShowMask = false
					this.addr = []
				}, 500);
			},
			getCity(id){
				this.regions_id = id?id:0
				uni.request({
					url: api.base + '/regions/'+this.regions_id +'/children',
					success: async (res) => {
						if(res.data.length>0){
							console.log('123123',res)
								this.cityAreaArray = res.data
						}else{
								this.isShow = false
								this.isShowMask = false
								//选择成功返回数据
								this.$emit("selectAddress", this.addr)
						}
					},
					fail(err) {
						console.log(err)
					}
				})
				// Base_API.Regions(this.regions_id).then(res=>{
				// 	if(res.length>=1){
				// 		this.cityAreaArray = res
				// 	}else{
				// 		this.isShow = false
				// 		this.isShowMask = false
				// 		//选择成功返回数据
				// 		this.$emit("selectAddress", this.addr)
				// 	}
				// })
			},
			select_top_item_click(item,index) {
				this.currentIndex = index
				this.$nextTick(() => {
					this.changeIndicator(item,index)
				})
			},
			swiperChange(event){
				let index = event.detail.current
				this.currentIndex = index
				this.changeIndicator(this.regions_id,index)
			},
			changeIndicator(item,index){
				if(index === 0){
					this.indicatorStyleLeft = 16
					this.menulist = [{local_name:'请选择'}]
					this.getCity(0)
				}else{
					
					let indicatorWidth = 30
					const query = uni.createSelectorQuery().in(this);
					let arr = query.selectAll('.select_top_item .address_value')
					arr.fields({
					  size: true,
					  scrollOffset: false
					}, data => {
						let itemWidth = data[index]["width"] > 80 ? 70 : data[index]["width"]
						let itemCenterX = 10 + index * 80 + itemWidth / 2
						let left = itemCenterX - indicatorWidth / 2
						this.indicatorStyleLeft = left		 
					}).exec();
					this.getCity(item.id)
				}
			   
			   
			},
			address_item_click(item,index){
				if(this.menulist[0].local_name==='请选择'){
					this.menulist[0] = item
				}else{
					this.menulist.push(item)
				}
				this.getCity(item.id)
				this.regions_id = item.id
				this.addr.push(item)
			}
		},
		created() {
			//this.getCity()
		}
	}
</script>

<style lang="scss">
// 不换行
@mixin no-wrap(){
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.wrapper{
	z-index: 1999;
	position: absolute;
	top: -44px;
	left: 0;
	bottom: 0;
	right: 0;
	.content_view{
		z-index: 999;
		background: white;
		position: absolute;
		height: 80%;
		left: 0;
		bottom: 0;
		right: 0;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		.title_view{
			height: 10%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 $uni-spacing-row-sm;
			.title{
				font-size: 34rpx;
				font-weight: 600;
			}
			.close_view{
				height: 60px;
				width: 60px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.select_top{
			height: 8%;
			display: flex;
			justify-content: start;
			align-items: center;
			justify-content: center;
			padding: 10px;
			position: relative;
			box-sizing: border-box;
			.select_top_item{
				margin-right: 20rpx;
				font-size: 28rpx;
				@include no-wrap();
				.address_value{
					font-size:34rpx;
				}
			}
			.indicator{
				position: absolute;
				width: 30px;
				height: 2px;
				background: $uni-color-error;
				left: 16px;
				bottom: 0;
				transition: left 0.5s ease;
			}
		}
		.swiper{
			height: 80%;
			position: relative;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			.swiper-item{
				height: 100%;
				.scroll-view-item{
					height: 100%;
					padding:10px;
					.address_item{
						padding: 6px 0;
						font-size: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						.address_item_icon{
							width: 20px;
							height: 20px;
							margin-right: 10px;
						}
					}
				}
			}
		}
	}
	.mask{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: $uni-text-color-grey;
		opacity: 0.7;
	}
}

.content-enter{
  transform: translateY(100%);
}
.content-enter-to{
  transform: translateY(0%);
}
.content-enter-active{
  transition: transform 0.5s;
}
.content-leave{
  transform: translateY(0%);
}
.content-leave-to{
  transform: translateY(100%);
}
.content-leave-active{
  transition: transform 0.5s;
}

</style>
